import React, { useState } from "react";
import { Input, Typography, Divider, Card, Row, Col } from "antd";
import {
  SearchOutlined,
  FileTextOutlined,
  HeartOutlined,
  StarOutlined,
} from "@ant-design/icons";
import "./Home.less";
import TextTools from "../TextTools";
import ImageTools from "../ImageTools";

const { Title, Paragraph } = Typography;

const Home: React.FC = () => {
  const [searchText, setSearchText] = useState("");

  const filterTools = (tools: typeof recentTools) => {
    return tools.filter(
      (tool) =>
        tool.title.toLowerCase().includes(searchText.toLowerCase()) ||
        tool.description.toLowerCase().includes(searchText.toLowerCase())
    );
  };

  const filteredTools = filterTools(recentTools);

  return (
    <div className="home-container">
      <div className="welcome-section">
        <Title level={2}>乘风在线工具库</Title>
        <Paragraph>
          一站式工具集合，提供文本处理、图像编辑等多种实用工具，帮助您提升工作效率。
          所有工具完全免费，无需注册，即开即用！
        </Paragraph>
        <Input
          placeholder="搜索工具..."
          prefix={<SearchOutlined />}
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          style={{ width: "100%", marginBottom: "24px", maxWidth: "600px" }}
        />
      </div>

      {searchText && filteredTools.length > 0 ? (
        // 如果搜索框有值且有搜索结果，显示搜索结果
        <>
          <Divider orientation="left">搜索结果</Divider>
          <Row gutter={[16, 16]}>
            {filteredTools.map((tool, index) => (
              <Col xs={24} sm={12} md={8} lg={6} key={index}>
                <Card
                  hoverable
                  className="tool-card"
                  actions={[
                    <StarOutlined key="star" />,
                    <HeartOutlined key="like" />,
                  ]}
                >
                  <Card.Meta
                    title={
                      <div className="tool-title">
                        {tool.icon} {tool.title}
                      </div>
                    }
                    description={tool.description}
                  />
                </Card>
              </Col>
            ))}
          </Row>
        </>
      ) : (
        // 如果搜索框没有值或没有搜索结果，显示热门工具和最近添加
        <>
          <Divider orientation="left">最近添加</Divider>
          <Row gutter={[16, 16]}>
            {recentTools.map((tool, index) => (
              <Col xs={24} sm={12} md={8} lg={6} key={index}>
                <Card
                  hoverable
                  className="tool-card"
                  // actions={[
                  //   <StarOutlined key="star" />,
                  //   <HeartOutlined key="like" />,
                  // ]}
                >
                  <Card.Meta
                    title={
                      <div className="tool-title">
                        {tool.icon} {tool.title}
                      </div>
                    }
                    description={
                      <div className="h-[44px]">{tool.description}</div>
                    }
                  />
                </Card>
              </Col>
            ))}
          </Row>
          <Divider orientation="left">所有工具</Divider>
          <TextTools />
          <Divider className="my-4"></Divider>
          <ImageTools />
        </>
      )}
    </div>
  );
};

const recentTools = [
  {
    title: "px转rem",
    icon: <FileTextOutlined style={{ color: "#1677ff" }} />,
    description: "将px转换为rem，支持批量转换",
  },
];

export default Home;
